<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>设计癖</title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
                list-style: none;
                text-decoration: none;
            }
            body{
                background: #f5f5f5;
            }
            .header-zhanwei{
                height: 66px;
            }
            .header{
                height: 66px;
                position: fixed;
                background: #fff;
                left: 0px;
                top: 0px;
                border-bottom: 1px solid #e5e5e5;
                
            }
            .logo {
	            margin: 16px 25px 16px 12px;
	            float: left;
            }
            .logo a{
                margin: -4px 15px 15px 15px;
                display: block;
                height: 40px;
                width: 40px;
                box-shadow: 5px 5px 5px grey;
                background: url('https://www.shejipi.com/wp-content/themes/shejipi/favicon.png');
                background-size: cover;
                background-color: red;
                float: right;
            }
            .feel{
                margin: 14px 30px 0px 0px;
             float: left;
                
            }
            .feel a{
                margin: 0 0 0 12px;
                float: left;
                text-decoration: none;
            }
            .feel-tag{
                height: 36px;
                line-height: 36px;
                width: 42px;
                text-align: center;
                background: #FF0000;
                font-size: 20px;
                color: #fff;
            }
            .header-right{
                float: right;
            }
           
            .header-right img{
                float: left;
                margin: 18px 10px;
                width: 27px;
                height: 27px;
            }
            .header-right a {
                text-decoration: none;
                float: right;
                margin: 19px 25px;
                border-radius: 5px;
                color: white;
                padding: 2px 2px 2px 2px;
                background-color: red;
                border: 1px solid red;
            }
            .banner{
                width: 1440px;
                height: 610px;
                margin: 10px auto;
            }

            .banner-left{
                float: left;
                width: 1082px;
                height: 610px;
                margin-right: 10px;
            }


           .banner-left p{
                left: 0px;
                bottom: 0px;
                height: 30px;
                left: 16px;
                width: 332px;
                line-height: 30px;
                color: white;
                background: red;
                position: relative;
                top: -50px;
            }
            .banner-left img{
                width: 1082px;
                height: 610px;
                border-radius: 10px;
            }

            .baner-right{
                float: right;
                width: 347px;
                height: 610px;
                
            }


            .baner-right ul{
                float: rgiht;
                width: 347px;
                height: 610px;
            }
            .baner-right li{
                width: 347px;
                height: 195px;
                margin-bottom: 10px;
            }

            .baner-right img{
                width: 347px;
                height: 195px;
                border-radius: 10px;
            }
            .baner-right p{
                position: relative;
                top: -29px;
                left: 19px;
                color: white;
            }
            .select{
                width: 1440px;
                height: 40px;
                margin: 20px auto;
            }

  
            .select li{
                display: inline;
                margin-right: 15px;
                border-radius: 8px;
               
            }

            .select a{
                
                width: 126px;
                height: 31px;
                text-decoration: none;
                font-size: 14px;
                line-height: 31px;
                 margin: 10px 90px 10px 10px; 
                
            }
            .select select{
                background: #f5f5f5;
               
            }

            .list{
                
                width: 1440px;
                height: 1050px;
                margin: 10px auto;
            }
            .list ul{
                width: 1440px;
                height: 1000px;
            }
            .list li{
                float: left;
                height: 330px;
                width: 344px;
                margin-left: 15px;
                margin-bottom: 10px;
            }
            

            .maxbox{
                height: 330px;
                width: 344px;
                background: #fff;
                border-radius: 8px;
            }
            .look{
                position: relative;
                top: 4px;
            }
            .zan{
                position: relative;
                right: 286px;
                top: -303px;
               
                height: 36px;
                line-height: 36px;
                width: 36px;
                border-radius: 100%;
                display: block;
                text-align: center;
                background: #FF0000;
                font-size: 20px;
                color: #fff;
            }
            
            .maxbox-img{
                height: 232px;
                width: 344px;
                border-radius: 8px 8px 0px 0px;
            }
            .max-box-a{
                color: #333;
                font-size: 14px;
            }
            .date{
                float: left;
                margin-top: 25px;
                font-size: 12px;
                color: #ccc;
                margin-left: 10px;
            }
            .views{
                float: right;
                margin-top: 25px;
                font-size: 12px;
                color: #ccc;
                margin-right: 10px;
                
            }
            
            .footer-father{
                width: 100%;
                height: 33px;
            }

            .footer{
                position: fixed;
                bottom: 0px;
                z-index: 9px;
                background: #272B33;
                height: 33px;
                line-height: 33px;
                
            }

            .copyright {
                float: right;
                color: #999;
                margin: 0px 20px 0px 0px;
                font-size: 13px;
            }

            .load{
                margin: 10px auto;
                text-align: center;
                height: 25px;
                width: 1440px;
              
            }


          


            

           
           
          
        </style>
    </head>
    <body>
        <div class="header-zhanwei">
            <div class="header">
                <h1 class="logo">
                    <a href="" title="logo标题"></a>
                </h1>
                <div class="feel">
                    <a class="feel-tag" href="">赞</a>
                    <a class="feel-tag" href="">萌</a>
                    <a class="feel-tag" href="">哈</a>
                    <a class="feel-tag" href="">艹</a>
                    <a class="feel-tag" href="">买</a> 
                </div>
                <div class="header-right">
                    <img src="./images/search.png" alt="">
                    <a class="login_button" id="show_login" href="#">登录</a>
                </div>
            </div>
        </div>
       
        <div class="banner">
            <div class="banner-left">
                    <img src="./images/1.png" alt="">
                    <p>苹果又双叒叕搞事情？这次还有点意思</p>
               
            </div>
            <div class="baner-right">
                <ul>
                    <li>
                        <img src="./images/2.png" alt="">
                        <p>免费可商用素材库，设计师快来</p>
                    </li>
                    <li>
                        <img src="./images/3.png" alt="">
                        <p>华为发布全屋智能，让房子越住越增值？</p>
                    </li>
                    <li>
                        <img src="./images/4.jpg" alt="">
                        <p>是什么原因，让教科书里的小人丑得如此猖狂？</p>
                    </li>
                </ul>
            </div>
        </div>
       <div class="select">
           <ul>
               <li style=" border: 1px solid red; padding: 10px 90px 10px 10px;">
                   <a style="color: red;"  href="">最新</a>
                </li>
               <li>
                    <select style="padding: 12px 10px;border-radius: 8px; line-height: 31px;">
                        <option value ="volvo">排行榜</option>
                        <option value ="saab">24小时排行榜</option>
                        <option value="opel">本周排行榜</option>
                        <option value="audi">本月排行榜</option>
                  </select>
               </li>
               <li style=" border: 1px solid #999; padding: 10px 90px 10px 10px;">
                <a  href="">碰碰运气</a>
               </li>
           </ul>
       </div>
       <div class="list">
            <ul>
                <li>
                    <div class="maxbox">
                       
                        <img class="maxbox-img" src="./images/5.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">冒烟了？麦当劳冒烟了？</a></p>
                        
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>   <b class="zan">赞</b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/6.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">这辆车堪比别墅，竟连地下室都有！</a></p>
                        
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b> <b class="zan">赞</b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/7.png" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">灵感|“用细节颠覆传统”</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/8.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">幽默是创意的催化剂</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/9.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">DC发布新英雄“猴王子”形象设计，网友：烦死了！</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/10.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">全是违和感！这些合成伤脑筋！</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/11.png" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">华为发布全屋智能，让房子越住越增值？</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/12.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">曾经紧追苹果的LG，怎么就不行了？</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/13.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">比疫苗标语更魔性的，是疫苗段子</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/14.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">是什么原因，让教科书里的小人丑得如此猖狂？</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/15.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">沃尔沃设计辆车，简直就是个花园！</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>

           


                <li>
                    <div class="maxbox">
                        <img class="maxbox-img" src="./images/6.jpg" alt="">
                        <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">这辆车堪比别墅，竟连地下室都有！</a></p>
                        <span class="date"> 49分钟前  </span>
                        <span class="views">
                           <img class="look" src="./images/hot.png" alt=""> </i> <b>0 </b>
                        </span>
                        <span class="views">
                            <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                        </span>
                       
                    </div>
                    
                </li>
  


            </ul>
       </div>

       <div class="load">太快了吧，慢慢来</div>

     
        

    </body>
</html>